<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="shortcut icon" href="${path}/images/titleico.ico">
    <link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/layui/css/formSelects-v4.css">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.js"></script>
</head>
<body>
<br>
<h1 style="text-align: center">商品销售单列表</h1>
<hr class="layui-bg-blue">
<div class="layui-form-item">
    <div class="layui-inline">
        <div class="layui-form" action="">
            <!--商品名-->
            <label class="layui-form-label">商品名称：</label>
            <div class="layui-input-inline" style="width: 175px;">
                <input value="" id="mingcheng" name="shoppingName" type="text" autocomplete="off" class="layui-input">
            </div>
            <!--购买日期-->
            <label class="layui-form-label">购买日期：</label>
            <div class="layui-input-inline" style="width: 175px;">
                <input value="" id="dates" name="sxdate" type="text" autocomplete="off" placeholder="yyyy-MM-dd" class="layui-input">
            </div>
            <%--操作员--%>
            <label class="layui-form-label">操作员：</label>
            <div class="layui-input-inline" style="width: 175px;">
                <input value="" id="caozuoyuan" name="czyname" type="text" autocomplete="off" class="layui-input">
            </div>
            <!--查询-->
            <div class="layui-input-inline" style="width: 100px;">
                <button class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
            </div>
        </div>
    </div>
</div>
<hr class="layui-bg-blue">
<table class="layui-table" lay-data="{
            id:'spxsTable',
            url:'${path}/ShoppingXs/list',
            page:true,
            toolbar:'#toolbarDemo',
            defaultToolbar: ['filter', 'print', 'exports'],
            even: true,
            loading: true
        }"
       lay-filter="spxsTable">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox'}"></th>
        <th lay-data="{field:'shoppingName', sort: true}">商品名称</th>
        <th lay-data="{field:'shoppingJg'}">商品价格</th>
        <th lay-data="{field:'shoppingNum'}">商品数量</th>
        <th lay-data="{field:'sxdate'}">购买日期</th>
        <th lay-data="{field:'czyname'}">操作员</th>
    </tr>
    </thead>
</table>
<script>
    function searchData(){
        layui.table.reload("spxsTable",{
            page:{
                curr : 1
            },
            where:{
                "shoppingName":$("#mingcheng").val(),
                "sxdate":$("#dates").val(),
                "czyname":$("#caozuoyuan").val()
            }
        });
    }
    //加载表格 表单
    layui.use(["form","table","laydate"], function(){
        var table = layui.table;
        var laydate = layui.laydate;
        //头工具栏事件
        table.on('toolbar(spxsTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case "add":
                    break;
                //批量删除
                case 'getCheckLength':
                    var sp = table.checkStatus("spxsTable");
                    var data = sp.data;
                    if (data.length == 0){
                        layer.msg("请选择要删除的数据",function () {
                            return;
                        });
                    }else{
                        layer.confirm("真的要删除这么多数据吗？",{icon:5,title: "儿童乐园友情提示！"},function (index) {
                            var params = "";
                            for (let spo of data){
                                params += "id="+spo.id+"&";
                            }
                            $.post("${path}/ShoppingXs/batchDelete",params,function () {
                                layer.close(index);
                                table.reload("spxsTable");
                                layer.msg("批量删除成功")
                            })
                        });
                    }
                    break;
            };
        });
        //监听行工具时间
        table.on("tool(spxsTable)",function (obj) {
            var objdata = obj.data;
            if (obj.event == 'edit'){
                //edit
            }else if(obj.event == 'del'){
                //delete
            }
        })
        //执行一个laydate实例
        laydate.render({
            elem: '#dates' //指定元素
        });
    });
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn layui-btn-danger" lay-event="getCheckLength"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        <%--<button class="layui-btn layui-btn-sm layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加商品</button>--%>
    </div>
</script>
</body>
</html>